<template>
  <el-form class="BaseForm" ref="form" :model="prompt" label-width="88px" label-position="left">
    <div class="formContent">
      <div class="formTitle">基础图片</div>
      <div class="boxWraper">
        <ImagePicker TipsTxt="请上传需要去除背景的图片" ToPlatform="No-ComfyUI" @change="ChangeModelImg" Width="344px" Height="344px" :DefaultImageUrl="imageUrl"></ImagePicker>
      </div>
    </div>
    <div class="formBottomBar">
      <div class="content">
        <div class="tips">描述建议<br />图片主体 + 环境背景 + 图片风格</div>
      </div>
      <el-button round class="FormBtn" @click="onSubmit" v-loading="nowLoading"><el-icon class="icon"><Brush /></el-icon><span class="txt">生成图片</span></el-button>
    </div>
  </el-form>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<style>
</style>
<script>
import WebRequest from '../../unit/request.js'
import ImagePicker from '../element/ImagePicker.vue'
import OS from '../../unit/OS.js'
export default {
  name: 'RemoveBackground',
  components: { ImagePicker },
  props: {
    src: '',
    title: '',
    date: '',
    prompt: {},
    imageUrl: '',
    sourceImageDepotId:''
  },
  data () {
    return {
      baseImage:'',
      sourceImageDepotIdVal:'',
      nowLoading:false
    }
  },
  mounted(){
  },
  methods: {  
    onSubmit(e){
      this.nowLoading = true;
      WebRequest.PreConsumerPoint({
        serviceType:4,
        callback: (res) => {
          console.log(res);
          if(res.data.errCode == 10000){
            var coseId = res.data.data.id;
            this.$emit('startGenerate');
            var sourceImageDepotId = this.sourceImageDepotId; //this.sourceImageDepotIdVal
            if(this.sourceImageDepotIdVal != '' && this.sourceImageDepotIdVal != null){
              sourceImageDepotId = this.sourceImageDepotIdVal
            }
            /*{"operationId":"4",
            "operationName":"抠图",
            "originalImage":"https://picture.2beauti.com/prometheus/20240385/1711358318952.png",
            "resultImage":""}*/
            console.log('//////////////////',this.imageUrl)
            var extendValue = OS.GetFormSetting({
              operationId: "4",
              operationName: '抠图',
              originalImage: this.baseImage,
              resultImage:""
            })
            WebRequest.RemoveBackground({
              costId:coseId,
              imgUrl:this.baseImage,
              sourceImageDepotId:sourceImageDepotId,
              extendValue:extendValue,
              callback: (e) => {
                if(e.data.errCode == 10000){
                  var resultImgUrl = e.data.data.imgUrl
                  this.$emit('ResultCalled',resultImgUrl)
                  this.nowLoading = false
                  /*WebRequest.SaveToLibrary({
                    tool: 4,
                    imageURL: resultImgUrl,
                    callback: (_e) => {
                      if(e.data.errCode == 10000){
                      }else{
                        console.log('保存图库失败',e)
                      }
                    },
                    error: (_e) => {
                      this.nowLoading = false
                      console.log('保存图库接口请求异常',e)
                    }
                  })*/
                }else{
                  this.nowLoading = false
                  console.log('请求生图失败',e)
                  this.$message({
                    message: '请求生图失败',
                    type: 'error'
                  })
                }
              },
              error: (e) => {
                this.nowLoading = false
                console.log('请求生图接口请求异常',e)
                this.$message({
                  message: '请求生图接口请求异常',
                  type: 'error'
                })
              }
            })
          }else{
            this.nowLoading = false
            console.log('扣费失败',res)
            this.$message({
              message: '扣费失败',
              type: 'error'
            })
          }
        },
        error: (e) => {
            this.nowLoading = false
            console.log('扣费接口请求异常',res)
            this.$message({
              message: '扣费接口请求异常',
              type: 'error'
            })
        }
      })
    },
    ChangeModelImg (e) {
      console.log(e);
      if(e.fileName && e.fileName != null && e.fileName != ''){
        this.baseImage = e.fileName
      }else{
        this.baseImage = e.imageUrl
      }
      this.sourceImageDepotIdVal = e.sourceImageDepotId
    }
  }
}
</script>
